<template>
	<view class="lyric_box">
		<view class="song_lyric">
			<scroll-view class="scrollLyric" scroll-y :scroll-top="scTop">
				<ul class="ul_lyric" ref="ulLyric">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li v-for="(item,index) in lyric" :index="index">
						<span>{{item.lyric}}</span>
					</li>
				</ul>
			</scroll-view>
		</view>
		<view class="song_control">
			<view class="line1">
				<span class="time_left" :key="curtime">{{curtime}}</span>
				<view class="jindu">
					<view class="cur_jindu" :style="{width: curlong +'rpx'}" ></view>
					<view class="cur_right" @touchstart="moveStartFn($event)" @touchend="moveEndFn($event)"></view>
				</view>
				<span class="time_right">{{songtime}}</span>
			</view>
			<view class="line2">
				<uni-icons custom-prefix="iconfont" type="icon-24gl-repeat2" size="20" color="#fff"
					class="loops"></uni-icons>
				<uni-icons custom-prefix="iconfont" type="icon-shangyishou" size="40" color="#fff"
					class="pre_song"></uni-icons>
				<view class="" >
					<uni-icons custom-prefix="iconfont" type="icon-bofang" size="40" color="#fff"
						class="pause_play" v-show="pmmid" @click="showFn(false)"></uni-icons>
					<uni-icons custom-prefix="iconfont" type="icon-caozuo-bofang-zanting" size="40" color="#fff" v-show="!pmmid" @click="showFn(true)"></uni-icons>
				</view>
				<uni-icons custom-prefix="iconfont" type="icon-next-fill" size="30" color="#fff"
					class="next_song"></uni-icons>
				<uni-icons custom-prefix="iconfont" type="icon-24gf-playlist" size="20" color="#fff"
					class="play_list"></uni-icons>
			</view>
		</view>
		<video :src="`https://music.163.com/song/media/outer/url?id=${songdata.song_url}.mp3`" class="music"
			name="media" controls="false" autoplay type="audio/mpeg" ref="videodom" ></video>
	</view>
</template>

<script lang="ts">
	export default {
		data() {
			return {
				songdata: { song_url: '', time: 0 },
				songtime: { curtime: 0, alltime: 0 },
				curtime: '00:00',
				curtime_S: 0,
				songid: '',
				lyric: [],
				scTop: 0,
				curlong:0,
				pmmid:false,
				move:{
					start:0,
					end:0,
				}
			};
		},
		onLoad: function (option : any) { //option为object类型，会序列化上个页面传递的参数
			if(option.time){	
				this.songdata.time = option.time;
			}
			this.songdata.song_url = (option.song_url as string);
			this.songid = option.song_id;
			this.getData(this.songid);

		},
		watch: {
			//使用watch来响应数据的变化，第一个参数为newVal新值，第二个参数oldVal为旧值
			songdata: {
				handler(newVal, oldVal) {

				},
				//immediate: true,//初始化绑定时就会执行handler方法
				deep: true
			},
			curtime_S: {
				handler(newVal, oldVal) {

				},
			}

		},
		mounted() {
			let videobtn = document.querySelector('.music').querySelector('video');
			(videobtn as HTMLVideoElement).currentTime = this.songdata.time;
			let ulLyricDom = this.$refs.ulLyric;
			let allTime = Number((videobtn as HTMLVideoElement).duration);
			let liArr = (ulLyricDom as HTMLUListElement).querySelectorAll('li');
			let liArrSet = setInterval(() => {
				liArr = (ulLyricDom as HTMLUListElement).querySelectorAll('li');
				allTime = Number((videobtn as HTMLVideoElement).duration);
				if (liArr.length > 30 &&allTime) {
					clearInterval(liArrSet)
				}
			}, 1000);
			//歌曲总时间
			(videobtn as HTMLVideoElement).addEventListener('timeupdate', () => {
				this.curtime_S = Number((videobtn as HTMLVideoElement).currentTime);
				let custime = this.curtime_S.toString().split('.')[0];
				this.getTime(custime);
				this.getTop(ulLyricDom, liArr);
				this.curlong=(this.curtime_S/allTime*500);
				if(this.curtime_S ==allTime){
					this.pmmid = true;
				}
			})
		},
		methods: {
			getData(songid : string) {
				uni.request({
					url: 'api/songInfo',
					data: {
						songid: songid
					},
					success: (res : any) => {
						this.songtime = res.data.song[0].songTime.padStart(5, '0');
						this.lyric = this.handleLyric(res.data.song[0].lyric_time);
						//console.log(this.lyric);
					}
				})
			},
			//时间转化为 mi:ss形式
			getTime(custime : any) {
				let mi = Math.floor(custime / 60).toString();
				let ss = (custime % 60).toString();
				mi = mi.padStart(2, '0');
				ss = ss.padStart(2, '0');
				this.curtime = `${mi}:${ss}`;
			},
			//歌词数据处理为对象
			handleLyric(lyric : any) {
				let mid = lyric.toString().split('\r\n');
				let res = []
				mid.forEach(item => {
					let time = item.split(']')[0].substring(1);
					let ric = item.split(']')[1];
					time = time.split(':')[0] * 60 + Number(time.split(':')[1])
					let obj = { time: time, lyric: ric };
					res.push(obj)
				})
				return res;
			},
			//获取高亮显示的歌词下标
			getcurIndex(lyric : any[], curtime_S : number) {
				for (let i = 0; i < lyric.length; i++) {
					if (lyric[i].time >= curtime_S) {
						return i - 1 + 10;
					}

				}
				return -1
			},
			//设置滚动偏移量
			getTop(ulLyricDom:any, liArr:any) {
				let li = (ulLyricDom as HTMLUListElement).querySelector('.lyric_active')
				if (li) {
					li.classList.remove('lyric_active');
				}
				let index_ly = this.getcurIndex(this.lyric, this.curtime_S);
				if (liArr[index_ly]) {
					liArr[index_ly].classList.add('lyric_active');
					this.scTop = (index_ly - 10) * 30;
				}
			},
			showFn(tf:boolean){
				this.pmmid = tf;
				let videobtn = document.querySelector('.music').querySelector('video');
				if(this.pmmid){
					videobtn.pause();
				}else{
					videobtn.play();
				}
			},
			//进度条拖动
			moveStartFn(ev:any){		
				this.move.start = ev.changedTouches[0].pageX;
			},
			moveEndFn(ev:any){
				this.move.end = ev.changedTouches[0].pageX;
				this.curlong +=((Number(this.move.end)-Number(this.move.start))*2);
				let videobtn = document.querySelector('.music').querySelector('video');
				let allTime = Number((videobtn as HTMLVideoElement).duration);
				videobtn.currentTime = (this.curlong/500)*allTime;
			}
		}
	}
</script>

<style lang="scss">
	.lyric_box {
		background-color: rgb(64, 58, 45);

		.song_lyric {
			.scrollLyric {
				height: 520px;
				transition: 0.5s all;

				ul>li {
					text-align: center;
					list-style: none;
					text-align: center;
					color: rgb(142, 141, 139);
					font-size: 16px;
					height: 30px;
					line-height: 30px;
					transition: 0.5s all;
				}

				.lyric_active {
					color: #fff;
					transform: scale(1.3);
				}
			}
		}

		.song_control {
			font-size: 12rpx;
			margin: 20rpx 0;
			padding: 0 40rpx;

			.line1 {
				display: flex;
				.time_left {
					color: rgb(227, 227, 203);
				}
				.jindu {
					display: inline-block;
					margin: 0 20rpx;
					width: 500rpx;
					height: 1rpx;
					background-color: rgb(142, 141, 139);
					display: flex;
					transform: translateY(15rpx);

					.cur_jindu {
						height: 1rpx;
						padding: 0;
						background-color: #fff;
					}

					.cur_right {
						height: 0;
						width: 0;
						border: 6rpx solid #fff;
						border-radius: 50%;
						transform: translateY(-4rpx);
					}

				}

				.time_right {
					color: rgb(142, 141, 139);
				}
			}

			.line2 {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 20rpx;
			}
		}

		.music {
			width: 0;
			height: 0;
		}
	}
</style>